<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/home.css">
</head>

<body>
    <div class="nav-toggle open hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="menu-container nav-open">
        <nav>
            <div>
                <div class="title">
                    <h5>Terrarium <br><span>O</span>-Matic</h5>
                </div>
                <ul class="container-controls">
                    <li>
                        <a rel="nofollow" rel="noreferrer" id="box" class="toggle ">
                            <svg viewBox="0 0 55 55">
                                <path class="st0" d="M41.5,45.3l-15,5.6l-13.9-5.2 M41.5,45.3l9.3-3.4V11.6L37.4,6.5 M37.4,6.5L26.5,2.4L2.3,11.6v30.3l10.4,3.8
         M26.5,20.6l24-8.9 M26.5,50.9V20.6l-24.3-9" />
                            </svg>
                            <p>Box</p>
                        </a>
                    </li>

                    <li>
                        <a rel="nofollow" rel="noreferrer" id="pyramid" class="toggle">
                            <svg viewBox="0 0 55 55">
                                <path class="st0"
                                    d="M25.9,8.1l22.9,39.7H3L25.9,8.1z M48.8,47.8L25.9,36.7L3,47.8 M25.9,36.7V8.1" />
                            </svg>
                            <p>pyramid</p>
                        </a>
                    </li>

                    <li>
                        <a rel="nofollow" rel="noreferrer" id="sphere" class="toggle selected">
                            <svg viewBox="0 0 55 55">
                                <path class="st0" d="M26.5,3l20.4,11.8v23.6L26.5,50.2L6.1,38.4V14.8L26.5,3z M13.1,18.9v15.5l13.4,7.7l13.4-7.7V18.9l-13.4-7.7
            L13.1,18.9z M13.1,18.9l-7-4 M26.5,11.1V3 M39.9,18.9l7-4 M46.9,38.4l-7-4 M26.5,42.1v8.1 M13.1,34.3l-7,4" />
                            </svg>
                            <p>Sphere</p>
                        </a>
                    </li>
                </ul>
            </div>

            <ul class="action-controls">
                <li>
                    <a rel="nofollow" rel="noreferrer" id="animateBtn" class="btn active">
                        <button>
                            <p>Animate!</p>
                        </button>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="clearBtn" class="btn">
                        <button>
                            <p>Clear Scene</p>
                        </button>
                    </a>
                </li>
            </ul>

            <!--   <h5>Plants & Objects</h5> -->
            <ul class="object-controls">
                <li>
                    <a rel="nofollow" rel="noreferrer" id="scaleUp" class="btn">
                        <p>Scale Up</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="scaleDown" class="btn">
                        <p>Scale Down</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="moveForward" class="btn">
                        <p>move Forward</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="moveBackward" class="btn">
                        <p>move Backward</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="rotateBtn" class="btn">
                        <p>Rotate</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="removeBtn" class="Btn">
                        <p>Remove</p>
                    </a>
                </li>
            </ul>

            <ul class="create-objects">
                <li>
                    <a rel="nofollow" rel="noreferrer" id="pyramidBtn" class="btn object">
                        <svg viewBox="0 0 80 84">
                            <path class="st1" d="M40.8,10.9l37,64H3.8L40.8,10.9z M40.8,42.6c-6,0-10.9,4.9-10.9,10.9s4.9,10.9,10.9,10.9s10.9-4.9,10.9-10.9
        S46.8,42.6,40.8,42.6z M34.3,53.5l6.4,6.4l6.4-6.4l-6.4-6.4L34.3,53.5z M31,13.9l-5.4-5.4 M49.6,14.8L55,9.4 M40.8,7.1V3.7
         M45.7,10.9l3.2-3.2 M35.9,10.9l-3.2-3.2" />
                        </svg>
                        <p>Add Pyramid</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="ufoBtn" class="btn object">
                        <svg viewBox="0 0 80 84">
                            <path class="st1" d="M29.6,44.8c-13.1-0.5-20.1-2.1-20.1-3.9c0-2.3,14.3-4.1,32-4.1s32,1.8,32,4.1c0,1.8-8,3.3-20.4,3.9 M41,74.9
        c-11.6,0-21,1.2-21,2.7c0,1.5,9.4,2.7,21,2.7s21-1.2,21-2.7C62,76.1,52.6,74.9,41,74.9z M73.4,40.9c0-33.6-63.9-33.6-63.9,0
         M53.3,17.4c0-19.4-23.8-19.4-23.8,0 M33.8,36.9L20,77.6 M50.8,36.9L62,77.6 M42,53.6c-1.3,0-2.3,1-2.3,2.3c0,1.3,1,2.3,2.3,2.3
        c1.3,0,2.3-1,2.3-2.3C44.3,54.7,43.2,53.6,42,53.6z M39.6,69.7L42,66v-7.6 M36.7,60.6l5.3,1.9 M46.8,61.1l-3.9,1.4 M45.3,68.9L42,66
        " />
                        </svg>
                        <p>Add Ufo</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="palmBtn" class="btn object">
                        <svg viewBox="0 0 80 84">
                            <path class="st1"
                                d="M13.6,47.9c-3.5,1.6-6.1,1.6-12,1.6C1.6,24.6,18,27.8,18,27.8 M23.3,31.4c0,0-18.2,11.1-3.1,30.9
        C39.9,47.2,23.3,31.4,23.3,31.4 M24.1,31.4c6.7-1.2,14.3-12.5,9.8-27.4c-23.8,7.1-12.7,27.4-12.7,27.4 M72.9,75.6
        c-6.8-1.9-1.5-42.1-41.4-48.9 M52.9,73.7c10-5.2,3.2-31.6-13.2-37.3 M36.7,35.8c-2.3,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3
        s4.3-1.9,4.3-4.3S39.1,35.8,36.7,35.8z M30.8,29.1c-2.3,0-4.3,1.9-4.3,4.2s1.9,4.3,4.3,4.3s4.3-1.9,4.3-4.3S33.2,29.1,30.8,29.1z" />
                        </svg>
                        <p>Palm Tree</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="alienBtn" class="btn object">
                        <svg viewBox="0 0 80 84">
                            <path class="st1" d="M21.9,44.7c-0.3,1.6-1.1,2.9-2.9,2.5c-0.8-0.2-1.5-0.6-2.1-1c-3.9-2.8-6.7-7.1-7.7-11.8
            c-0.3-1.4-0.9-11.8,2.6-9.6C18.5,29.1,23.2,36.4,21.9,44.7z M48.1,25.3c-0.9-4-7.8,3.7-8.6,4.9c-2.7,4-3.8,9-3,13.7
            c0.1,0.8,0.3,1.6,0.8,2.2c1,1.5,2.5,1.3,3.9,0.3C47.9,41.7,49.8,33.2,48.1,25.3z M31.3,65.8c0,0-1.6,10.8,1.1,12.7
            c0,0,17.6,2.5,21.7,8.3 M2.1,85.8c4.1-5.7,21.7-7.3,21.7-7.3c2.7-1.9,1.1-12.7,1.1-12.7 M63.1,103.5l0.8-20.7l-0.1-0.2
            c2.4-0.6,5-2.9,3.5-10.4l6.7-8.4c0,0,3.7-1.6,3.7-4.9c0-2.1-2.8-3.5-4.7-2.7c-1.4,0.6-2.2,5.4-2.2,5.4l-7.4,7.3l-0.2-10.8
            c0,0,1.8-3.6-0.3-6.2c-1.3-1.6-4.4-0.8-5.3,1c-0.7,1.4,1.8,5.6,1.8,5.6l0.4,11l-6.9-9.9c0,0-0.3-4-3.4-5.1c-2-0.7-4.2,1.5-4.1,3.6
            c0.1,1.5,4.4,3.9,4.4,3.9l5,7.7l0.1,0.7c0,0-1.3,6.7,0,9.2c0.8,1.4,2.6,2.3,4.1,2.7l0,0.6l-0.8,20.7 M27.6,65.8
            C38.2,65.3,54.7,42,55.5,29.3C57.3-0.8,3.9-3.1,2.1,27.8C1.5,38.4,18.5,66.2,27.6,65.8z" />
                        </svg>

                        <p>Add Alien</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="tallBtn" class="btn object">
                        <svg viewBox="0 0 80 84">
                            <path class="st1" d="M43.1,68.7C42,69,41.3,69.2,40,69.2c-1.2,0-2.4-0.2-3.5-0.5 M51.1,62c0.8-1.6,1-2.9,1-4.8
            c0-6.7-5.4-12.1-12.1-12.1S28,50.5,28,57.2c0,1.6,0,2.2,0.5,3.6 M40,29.9c-4.2,0-7.6,3.4-7.6,7.6s3.4,7.6,7.6,7.6s7.6-3.4,7.6-7.6
            S44.3,29.9,40,29.9z M40,18.8c-3.1,0-5.5,2.5-5.5,5.5s2.5,5.5,5.5,5.5s5.5-2.5,5.5-5.5S43.1,18.8,40,18.8z M40,10.9
            c-2.2,0-3.9,1.8-3.9,3.9s1.8,3.9,3.9,3.9S44,17,44,14.8S42.2,10.9,40,10.9z M38.7,72.1c-1.9-3-9.3-13.5-22.5-16
            c-3.7-0.7-9.9-0.8-12.6-0.4c0,0,4.8,8.7,7.9,10.9C22.6,74.2,38.7,72.1,38.7,72.1z M39.9,72.2c3.5,0.7,16.1,3,27.2-4.6
            c3.1-2.2,7.5-6.4,9.2-8.6c0,0-9.5-2.8-13.3-2.1C49.9,59.3,39.9,72.2,39.9,72.2z" />
                        </svg>
                        <p>Add Tall Flower</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="smallBtn" class="btn object">
                        <svg viewBox="0 0 80 84">
                            <path class="st1" d="M43,65.4c-1.1,0.4-1.8,0.6-3.1,0.6c-1.2,0-2.4-0.2-3.5-0.5 M55,55.8c1.1-2.1,1.3-2.8,1.3-5.3
            c0-8.7-7-15.7-15.7-15.7s-15.7,7-15.7,15.7c0,2,0.4,4,1.1,5.7 M38.6,68.8c-1.9-2.9-9.3-13.4-22.4-15.9c-3.7-0.7-9.8-0.8-12.5-0.4
            c0,0,4.7,8.7,7.9,10.8C22.6,70.9,38.6,68.8,38.6,68.8z M39.8,68.9c3.4,0.7,16,2.9,27-4.6c3.1-2.1,7.5-6.4,9.1-8.6
            c0,0-9.5-2.8-13.2-2.1C49.7,56.1,39.8,68.9,39.8,68.9z" />
                        </svg>

                        <p>Add Small Flower</p>
                    </a>
                </li>

                <li>
                    <a rel="nofollow" rel="noreferrer" id="succulentBtn" class="btn object">
                        <svg viewBox="0 0 80 84">
                            <path class="st1" d="M24.3,20.1c2.6,0.6,7.5,2.1,11.7,6.4c8.8,8.9,3.3,26.5,3,27.9c-1.2-0.6-15.7-7.7-17.4-20.1
            c-0.8-5.9,1-10.7,2.1-13.1 M60.3,27.9c-2.6,0.1-7.7,0.8-12.6,4.2C37.5,39.3,38,55.4,38,56.8c1.3-0.4,19.5-3.7,23.3-15.6
            c1.8-5.7,0.9-10.7,0.2-13.3 M14.1,27.9c-0.7,2.5-1.6,7.6,0.2,13.3c3.8,11.9,22,15.2,23.3,15.6c0-1.4,0.5-17.5-9.7-24.7
            C23,28.6,18,28,15.3,27.9 M47.1,19.6c-2.3,1.2-6.6,4-9.6,9.2c-6.1,10.9,1.2,25.2,1.8,26.5c1-0.9,16-11.7,14.3-24.1
            C53,25.3,50,21.1,48.3,19.1 M77.5,53.5c-3.4-1.4-12.1-3.5-17.2-2.9c-14.2,1.5-20.2,8.1-20.5,7.7c0.8,0.8,9.9,10,23.2,5
            c6.3-2.4,11.2-6.5,13.6-8.7 M39.8,58.2c5.8,7.3,35.9-2.5,36.7-3.6 M3.5,54.7c2.4,2.2,7.2,6.3,13.6,8.7c13.2,5,22.4-4.3,23.2-5
            c-0.3,0.4-6.4-6.2-20.5-7.7c-5.2-0.6-13.8,1.6-17.2,2.9 M3.5,54.7c0.8,1.2,30.9,10.9,36.7,3.6" />
                        </svg>
                        <p>Add Succulent</p>
                    </a>
                </li>
                <li>
                    <a rel="nofollow" rel="noreferrer" id="cactusBtn" class="btn object">
                        <svg viewBox="0 0 80 84">
                            <path class="st1" d="M26.6,80.8V16.6c0-18.9,25.6-18.9,25.6,0v64.1 M26.6,30.7 M26.6,31.5l-8.3,0.3V17.7c0-5.4-11.6-5.4-11.6,0v13
            v13h2.2h16.3 M52.2,52.6h21.2c4.7,0,4.7-10.5,0-10.5H52.2" />
                        </svg>
                        <p>Add Cactus</p>
                    </a>
                </li>
            </ul>



        </nav>
    </div>
    <!-- ./menu-container-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
    <script src="js/DragControlsr84.js"></script>
    <script src="js/TrackballControlsr84.js"></script>
    <script>
        var scene,
            camera,
            renderer,
            light,
            controls;

        var radius = 100,
            theta = 0;

        var activeObjects = [];
        var terrarium = [];

        function init() {

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 2.25;
            camera.lookAt(scene.position);

            renderer = new THREE.WebGLRenderer({
                alpha: true,
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            window.addEventListener('resize', onResize, false);

            function onResize() {
                width = window.innerWidth;
                height = window.innerHeight;
                camera.aspect = width / height;
                camera.updateProjectionMatrix();
                renderer.setSize(width, height);
            }

            var light = new THREE.PointLight(0xF7AEF8, 1);
            light.position.set(0, 205, 10);
            scene.add(light);

            var light = new THREE.HemisphereLight(0xffffff, 0x241623, 1);
            light.position.set(0, 205, 20);
            scene.add(light);

            raycaster = new THREE.Raycaster();
            mouse = new THREE.Vector2();


            //drag controls
            controls;
            controls = new THREE.TrackballControls(camera);
            controls.rotateSpeed = 1.5;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 2.5;
            controls.maxDistance = 5.5;
            controls.minDistance = 1.25;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            var dragControls = new THREE.DragControls(activeObjects, camera, renderer.domElement);
            dragControls.addEventListener('dragstart', function (event) {
                controls.enabled = false;
            });
            dragControls.addEventListener('dragend', function (event) {
                controls.enabled = true;
            });

        };




        function selectContainer() {

            var dirt = new THREE.MeshBasicMaterial({
                color: 0xfff444
            });
            var container, line, earth;
            var x, y, z;

            //toggle terrarium type
            var elements = document.getElementsByClassName("toggle");
            for (var i = 0; i < elements.length; i++) {
                elements[i].addEventListener('click', function () {
                    var check = this.getAttribute('class');
                    if (check != 'toggle selected') {
                        var i = this.getAttribute('id');
                        eraseScene();
                        assignClass(i);
                    } else { }
                }, false);
            };


            //erase old terrarium
            function eraseScene() {
                scene.remove(terrarium[2]);
                scene.remove(terrarium[1]);
                scene.remove(terrarium[0]);
            }

            //match container type
            function assignClass(i) {
                console.log("assignClass");
                switch (i) {
                    case 'box':
                        sqrTerr();
                        break;
                    case 'pyramid':
                        triTerr();
                        break;
                    case 'sphere':
                        circTerr();
                        break;
                }
            }


            //start with a circular container
            circTerr();

            //square container
            function sqrTerr() {

                var box = new THREE.BoxGeometry(1.5, 1.5, 1.5);
                var earth = new THREE.BoxGeometry(1.45, .4, 1.5);
                var boxBottom = new THREE.Mesh(earth, dirt);
                boxBottom.position.y = -.50;
                drawContainer(box, boxBottom);
            }

            //triangle container
            function triTerr() {

                var pyramid = new THREE.ConeGeometry(1.5, 2, 4);
                pyramid.rotateY(.75);
                var earth = new THREE.CubeGeometry(1.8, .2, 1.8);
                var pyramidBottom = new THREE.Mesh(earth, dirt);
                pyramidBottom.position.y -= .85;
                pyramidBottom.rotation.y = 1.5;
                drawContainer(pyramid, pyramidBottom);
            }

            //circle container
            function circTerr() {
                var sphere = new THREE.DodecahedronGeometry(1.25, 0);
                sphere.rotateX(10);
                var earth = new THREE.CylinderBufferGeometry(1, .70, .45, 5);
                earth.rotateX(0);
                earth.rotateY(0);
                earth.translate(0, -.75, 0);
                var sphereBottom = new THREE.Mesh(earth, dirt);
                drawContainer(sphere, sphereBottom);
            }

            function drawContainer(shape, earth) {
                //glass
                var glass = new THREE.MeshNormalMaterial({
                    transparent: true,
                    opacity: .2,
                    color: 0xFFFFFF,
                    shading: THREE.FlatShading,
                });
                var edges = new THREE.EdgesGeometry(shape);
                line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
                    color: 0xffffff,
                    transparent: true,
                    linejoin: 'bevel',
                    opacity: .8
                }));

                earth.material = new THREE.MeshToonMaterial;
                //randomize earth color
                earth.material.color = new THREE.Color(0xffffff * Math.random());
                earth.material.needsUpdate = true;

                var container = new THREE.Mesh(shape, glass);
                terrarium = [container, line, earth];

                scene.add(container, line, earth);
            }
        }


        function selectObjects() {

            var flowerColors = [0x6CDFEA, 0xC3FF68, 0xD31996, 0x1B065E];
            var bigSelect;

            var addPyramid = document.getElementById("pyramidBtn");
            addPyramid.addEventListener("click", createPyramid, false);

            function createPyramid() {

                var geometry = new THREE.BoxGeometry(.25, .35, .15);
                var material = new THREE.MeshBasicMaterial({
                    color: 0xffff00,
                    transparent: true,
                    opacity: 0
                });
                var magicPyramid = new THREE.Mesh(geometry, material); //

                //pyramid
                var geometry = new THREE.ConeGeometry(.25, .35, 4);
                var material = new THREE.MeshNormalMaterial();
                var cone = new THREE.Mesh(geometry, material);
                cone.rotation.y = 3.95;
                magicPyramid.add(cone);

                //eye
                var geometry = new THREE.SphereGeometry(.085, 32, 16);
                var material = new THREE.MeshLambertMaterial({
                    color: 0xffffff,
                    shading: THREE.FlatShading
                });
                var sphere = new THREE.Mesh(geometry, material);
                sphere.position.set(0, -.05, .10);
                magicPyramid.add(sphere);

                //pupil
                var geometry = new THREE.BoxGeometry(.085, .085, .05);
                var material = new THREE.MeshNormalMaterial();
                mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(0, -.05, .18);
                mesh.rotation.z = Math.PI / 4;
                magicPyramid.add(mesh);

                activeObjects.push(magicPyramid);
                scene.add(magicPyramid);
            }


            var addUfo = document.getElementById("ufoBtn");
            addUfo.addEventListener("click", createUfo, false);

            function createUfo() {

                var geometry = new THREE.BoxGeometry(.35, .25, .25);
                var material = new THREE.MeshToonMaterial({
                    color: 0xffff00,
                    transparent: true,
                    opacity: 0
                });
                var ufo = new THREE.Mesh(geometry, material);

                var geometry = new THREE.SphereGeometry(.10, 4, 32);
                var material = new THREE.MeshToonMaterial({
                    color: 0x3DCCC7,
                    shininess: 500

                });
                var sphere = new THREE.Mesh(geometry, material);
                sphere.position.set(0, .035, 0);
                ufo.add(sphere);

                var geometry = new THREE.CylinderGeometry(.05, .25, .15, 32);
                var material = new THREE.MeshToonMaterial({
                    color: 0x333333,
                    reflectivity: 1000,
                    shininess: 100
                });
                var cylinder = new THREE.Mesh(geometry, material);
                ufo.add(cylinder);

                activeObjects.push(ufo);
                scene.add(ufo);
            }




            var addpalmTree = document.getElementById("palmBtn");
            addpalmTree.addEventListener("click", createpalmTree, false);

            function createpalmTree() {

                var geometry = new THREE.BoxGeometry(.35, 1.5, .25);
                geometry.translate(0, .5, 0);
                var material = new THREE.MeshBasicMaterial({
                    color: 0xffff00,
                    transparent: true,
                    opacity: 0
                });
                var palmTree = new THREE.Mesh(geometry, material);

                var geometry = new THREE.CylinderGeometry(0.35, 0.45, .5, 6);
                var material = new THREE.MeshNormalMaterial({
                    color: 0x948C75
                });
                var palmBase = new THREE.Mesh(geometry, material);
                palmTree.add(palmBase);

                var geometry = new THREE.CylinderGeometry(0.20, 0.30, .5, 6);
                var palmBase = new THREE.Mesh(geometry, material);
                palmBase.position.set(-.025, .45, .0);
                palmBase.rotation.set(0, 0, .15);
                palmTree.add(palmBase);

                var geometry = new THREE.CylinderGeometry(0.05, 0.20, .5, 6);
                var palmBase = new THREE.Mesh(geometry, material);
                palmBase.position.set(-.15, .85, .0);
                palmBase.rotation.set(0, 0, .35);
                palmTree.add(palmBase);

                var geometry = new THREE.CylinderGeometry(0.015, 0.04, .25, 6);
                var palmTrunkTop = new THREE.Mesh(geometry, material);
                palmTrunkTop.position.set(-.28, 1.15, .025);
                palmTrunkTop.rotation.set(.25, .5, .5);
                palmTree.add(palmTrunkTop);

                //LEAVES
                var leafShape = new THREE.Shape();
                leafShape.quadraticCurveTo(0, 5.5, 10, 5.5);
                leafShape.quadraticCurveTo(0, -5.5, 0, 2);

                var extrudeSettings = {
                    steps: 1,
                    amount: .005,
                    bevelEnabled: true,
                    bevelThickness: .025,
                    bevelSize: .50,
                    bevelSegments: .5
                };


                var geometry = new THREE.ExtrudeGeometry(leafShape, extrudeSettings);

                var material = new THREE.MeshToonMaterial({
                    color: 0x0CA4A5
                });
                var Leaf = new THREE.Mesh(geometry, material);
                Leaf.scale.set(.085, .085, 1);
                Leaf.position.set(-1.05, .5, 0);
                Leaf.rotation.set(18.5, 2.5, 2);
                palmTree.add(Leaf);

                pL = Leaf.clone();
                pL.position.set(.3, 1.9, .15);
                pL.rotation.set(8.8, .5, 2);
                palmTree.add(pL);

                pL = Leaf.clone();
                pL.position.set(0.10, .8, 1.05);
                pL.rotation.set(-.85, -3.5, .5);
                palmTree.add(pL);


                activeObjects.push(palmTree);
                scene.add(palmTree);
                palmTree.scale.set(.35, .35, .35);

            }


            var addTallFlower = document.getElementById("tallBtn");
            addTallFlower.addEventListener("click", createTallFlower, false);

            function createTallFlower() {

                var geometry = new THREE.BoxBufferGeometry(.10, .8, .10);
                geometry.translate(0, .35, .05);
                var material = new THREE.MeshBasicMaterial({
                    color: 0xffff00,
                    transparent: true,
                    opacity: 0
                });
                var tallFlower = new THREE.Mesh(geometry, material);

                //LEAVES
                var leafShape = new THREE.Shape();
                leafShape.quadraticCurveTo(0, 5.5, 10, 5.5);
                leafShape.quadraticCurveTo(0, -5.5, 0, 2);

                var extrudeSettings = {
                    steps: 1,
                    amount: .005,
                    bevelEnabled: true,
                    bevelThickness: .025,
                    bevelSize: .50,
                    bevelSegments: .5
                };


                var geometry = new THREE.ExtrudeGeometry(leafShape, extrudeSettings);
                var material = new THREE.MeshToonMaterial({
                    color: 0x1EEF94
                });
                var Leaf = new THREE.Mesh(geometry, material);
                Leaf.scale.set(.045, .045, 1.5);
                Leaf.rotation.set(-1, -.5, 0);
                tallFlower.add(Leaf);

                var newLeaf = Leaf.clone();
                newLeaf.rotation.set(-1.8, .2, 3.5);
                newLeaf.position.set(.05, 0, 0);
                tallFlower.add(newLeaf);

                var geometry = new THREE.SphereGeometry(.15, .15, 12);
                var material = new THREE.MeshToonMaterial({
                    shininess: 100
                });
                var sphere = new THREE.Mesh(geometry, material);
                sphere.position.set(.05, .15, .05);
                sphere.material.color = new THREE.Color(flowerColors[Math.floor(Math.random() * flowerColors.length)]);
                sphere.material.needsUpdate = true;
                tallFlower.add(sphere);

                var newSphere = sphere.clone();
                newSphere.scale.set(.85, .85, .85);
                newSphere.position.set(.025, .35, .05);
                tallFlower.add(newSphere);

                var newSphere = sphere.clone();
                newSphere.scale.set(.65, .65, .65);
                newSphere.position.set(0, .55, .05);
                tallFlower.add(newSphere);

                var newSphere = sphere.clone();
                newSphere.scale.set(.45, .45, .45);
                newSphere.position.set(0, .70, .05);
                tallFlower.add(newSphere);

                var newSphere = sphere.clone();
                newSphere.scale.set(.25, .25, .25);
                newSphere.position.set(0, .80, .05);
                tallFlower.add(newSphere);


                activeObjects.push(tallFlower);
                scene.add(tallFlower);
            }


            var addSmallFlower = document.getElementById("smallBtn");
            addSmallFlower.addEventListener("click", createSmallFlower, false);

            function createSmallFlower() {

                var geometry = new THREE.BoxGeometry(.25, .25, .08);
                geometry.translate(0, 0, .05);
                var material = new THREE.MeshBasicMaterial({
                    color: 0xffff00,
                    transparent: true,
                    opacity: 0
                });
                var smallFlower = new THREE.Mesh(geometry, material);

                //LEAVES
                var leafShape = new THREE.Shape();
                leafShape.quadraticCurveTo(0, 5.5, 10, 5.5);
                leafShape.quadraticCurveTo(0, -5.5, 0, 2);

                var extrudeSettings = {
                    steps: 1,
                    amount: .005,
                    bevelEnabled: true,
                    bevelThickness: .025,
                    bevelSize: .50,
                    bevelSegments: .5
                };

                var geometry = new THREE.ExtrudeGeometry(leafShape, extrudeSettings);
                var material = new THREE.MeshToonMaterial({
                    color: 0x1EEF94
                });
                var Leaf = new THREE.Mesh(geometry, material);
                Leaf.scale.set(.025, .025, 1);
                Leaf.rotation.set(-1.3, 0, 0);
                smallFlower.add(Leaf);

                var newLeaf = Leaf.clone();
                newLeaf.rotation.set(1.4, 3, 0);
                newLeaf.position.set(0, -.02, 0);
                smallFlower.add(newLeaf);

                var geometry = new THREE.SphereGeometry(.10, .10, 3);
                var material = new THREE.MeshToonMaterial({
                    shininess: 100
                });
                var sphere = new THREE.Mesh(geometry, material);
                sphere.position.set(0, .10, .05);
                sphere.material.color = new THREE.Color(flowerColors[Math.floor(Math.random() * flowerColors.length)]);
                sphere.material.needsUpdate = true;
                smallFlower.add(sphere);

                activeObjects.push(smallFlower);
                scene.add(smallFlower);

            }


            var addAlien = document.getElementById("alienBtn");
            addAlien.addEventListener("click", createAlien, false);

            function createAlien() {

                var geometry = new THREE.BoxGeometry(.25, .55, .05);
                geometry.translate(0, -.25, 0);
                var material = new THREE.MeshBasicMaterial({
                    color: 0xffff00,
                    transparent: true,
                    opacity: 0
                });
                var alienGuy = new THREE.Mesh(geometry, material);

                var geometry = new THREE.SphereGeometry(.03, .03, 8);
                var material = new THREE.MeshToonMaterial();
                var leftEye = new THREE.Mesh(geometry, material);
                leftEye.position.set(-.05, -.06, .05);
                leftEye.material.color = new THREE.Color(0x000000);
                alienGuy.add(leftEye);

                var rightEye = leftEye.clone();
                rightEye.position.set(.06, -.06, .05);
                alienGuy.add(rightEye);

                var geometry = new THREE.BoxGeometry(.05, .015, 0);
                var alienMouth = new THREE.Mesh(geometry, material);
                alienMouth.position.set(0.01, -.15, 0.055);
                alienGuy.add(alienMouth);

                var alienMouthLeft = alienMouth.clone();
                alienMouthLeft.position.set(-.02, -.14, 0.055);
                alienMouthLeft.scale.set(.5, 1, 1);
                alienGuy.add(alienMouthLeft);

                var alienMouthRight = alienMouthLeft.clone();
                alienMouthRight.position.set(.04, -.14, 0.055);
                alienGuy.add(alienMouthRight);

                var alienHead = new THREE.Shape();
                alienHead.quadraticCurveTo(0, 5.5, 10, 5.5);
                alienHead.quadraticCurveTo(0, -5.5, 0, 5.5);

                var extrudeSettings = {
                    steps: 1,
                    amount: .05,
                    bevelEnabled: true,
                    bevelThickness: 5.05,
                    bevelSize: 10.50,
                    bevelSegments: 10
                };

                var geometry = new THREE.ExtrudeGeometry(alienHead, extrudeSettings);
                var material = new THREE.MeshToonMaterial({
                    color: 0x7FFF24
                });
                var alienHead = new THREE.Mesh(geometry, material);
                alienHead.scale.set(.045, .045, 10);
                alienHead.rotation.set(0, 0, -2);
                alienGuy.add(alienHead);
                alienHead.scale.set(.010, .010, .010);

                var geometry = new THREE.BoxGeometry(.09, .20, .05);
                var material = new THREE.MeshToonMaterial({
                    color: 0x7FFF24
                });
                var alienBody = new THREE.Mesh(geometry, material);
                alienBody.position.set(0, -.35, 0);
                alienGuy.add(alienBody);

                var geometry = new THREE.BoxGeometry(.035, .15, .05);
                var alienRightArm = new THREE.Mesh(geometry, material);
                alienRightArm.position.set(-.1, -.4, 0);
                alienGuy.add(alienRightArm);

                var alienLeftArm = alienRightArm.clone();
                alienLeftArm.position.set(.1, -.4, 0);
                alienGuy.add(alienLeftArm);

                var alienRightLeg = alienRightArm.clone();
                alienRightLeg.position.set(-.04, -.5, 0);
                alienGuy.add(alienRightLeg);

                var alienLeftLeg = alienRightLeg.clone();
                alienLeftLeg.position.set(.04, -.5, 0);
                alienGuy.add(alienLeftLeg);

                activeObjects.push(alienGuy);
                scene.add(alienGuy);
            }

            var addSucculent = document.getElementById("succulentBtn");
            addSucculent.addEventListener("click", createSucculent, false);

            function createSucculent() {

                var geometry = new THREE.BoxGeometry(.25, .15, .05);
                var material = new THREE.MeshBasicMaterial({
                    color: 0xffff00,
                    transparent: true,
                    opacity: 0
                });
                var newSucculent = new THREE.Mesh(geometry, material);

                var leafShape = new THREE.Shape();
                leafShape.quadraticCurveTo(0, 5.5, 10, 5.5);
                leafShape.quadraticCurveTo(0, -5.5, 0, 2);

                var extrudeSettings = {
                    steps: 1,
                    amount: .005,
                    bevelEnabled: true,
                    bevelThickness: .025,
                    bevelSize: .50,
                    bevelSegments: .5
                };

                var geometry = new THREE.ExtrudeGeometry(leafShape, extrudeSettings);
                var material = new THREE.MeshToonMaterial({
                    color: 0x0CA4A5
                });
                var Leaf = new THREE.Mesh(geometry, material);
                Leaf.scale.set(.025, .025, 1);
                Leaf.rotation.set(-1.3, 0, 0);
                newSucculent.add(Leaf);

                newLeaf = Leaf.clone();
                newLeaf.rotation.set(-1.5, -1, 0);
                //newLeaf.position.set(.15, 0, .15);
                newSucculent.add(newLeaf);

                newLeaf = Leaf.clone();
                newLeaf.rotation.set(-1.5, -2, .01);
                newSucculent.add(newLeaf);

                newLeaf = Leaf.clone();
                newLeaf.rotation.set(-1.5, -3.25, .01);
                newSucculent.add(newLeaf);

                newLeaf = Leaf.clone();
                newLeaf.rotation.set(-10.5, -6.25, .01);
                newSucculent.add(newLeaf);

                newLeaf = Leaf.clone();
                newLeaf.rotation.set(-12.5, -7.25, .01);
                newSucculent.add(newLeaf);

                newLeaf = Leaf.clone();
                newLeaf.rotation.set(-10.5, -6.25, .01);
                newSucculent.add(newLeaf);

                newLeaf = Leaf.clone();
                newLeaf.rotation.set(-6.5, -2, .01);
                newSucculent.add(newLeaf);

                newLeaf = Leaf.clone();
                newLeaf.rotation.set(1.9, 3, .01);
                newSucculent.add(newLeaf);

                activeObjects.push(newSucculent);
                scene.add(newSucculent);
            }

            var addCactus = document.getElementById("cactusBtn");
            addCactus.addEventListener("click", createCactus, false);

            function createCactus() {

                var geometry = new THREE.BoxGeometry(.25, .55, .05);
                var material = new THREE.MeshBasicMaterial({
                    color: 0xffff00,
                    transparent: true,
                    opacity: 0
                });
                var newCactus = new THREE.Mesh(geometry, material);


                var geometry = new THREE.SphereGeometry(.085, 5, 3.5);
                var material = new THREE.MeshToonMaterial({
                    color: 0x004932,
                    roughness: 0.8,
                    shading: THREE.FlatShading,
                });
                var cactusTop = new THREE.Mesh(geometry, material);
                cactusTop.rotation.set(0, -3.5, 0);
                cactusTop.position.set(0, .28, 0);

                var geometry = new THREE.CylinderGeometry(.075, .075, .60, 5);
                var cactusArm = new THREE.Mesh(geometry, material);
                cactusArm.position.set(0, -.1, 0);
                cactusArm.add(cactusTop);
                newCactus.add(cactusArm);

                newArm = cactusArm.clone();
                newArm.scale.set(.85, .4, .85);
                newArm.position.set(-.1, -.025, 0);
                newArm.rotation.set(0, 0, 1.55);
                newCactus.add(newArm);

                secondArm = newArm.clone();
                newArm.rotation.set(0, 0, -1.55);
                newArm.position.set(.1, .055, 0);
                newCactus.add(secondArm);

                activeObjects.push(newCactus);
                scene.add(newCactus);
            }



            function manipulateObjs() {
                //incremental size change
                var inc = .25;
                var zindex = .25;
                var currentObj = [];
                var activeObj;

                //add transparent state to selected objects
                document.addEventListener('mousedown', onDocumentMouseDown);

                function onDocumentMouseDown(event) {
                    event.preventDefault();
                    //detect when mouse is over object
                    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                    raycaster.setFromCamera(mouse, camera);
                    //listen for clicks on objects or controls
                    selectObj = raycaster.intersectObjects(activeObjects);

                    if (selectObj.length > 0) {

                        var lastObj = currentObj.pop();
                        removeSelected(lastObj);

                        activeObj = selectObj[0].object;
                        currentObj.push(activeObj);

                        //get parameter of selected mesh
                        x = activeObj.scale.x;
                        y = activeObj.scale.y;
                        z = activeObj.scale.z;

                        for (i = 0; i < activeObj.children.length; i++) {
                            activeObj.children[i].material.opacity = .5;
                        }
                    } else {
                        removeSelected(activeObj);
                    }

                    function removeSelected(lastObj) {
                        if (lastObj) {
                            for (i = 0; i < lastObj.children.length; i++) {
                                lastObj.children[i].material.opacity = 1;
                            }
                        }
                    }
                } //End MouseDown

                var rotateObj = document.getElementById("rotateBtn");
                rotateObj.addEventListener("click", function () {

                    activeObj.rotateY(.5);
                }, false);

                var removeObj = document.getElementById("removeBtn");
                removeObj.addEventListener("click", function () {

                    for (var i = 0; i < activeObjects.length; i++) {
                        if (activeObjects[i].uuid == activeObj.uuid) {
                            activeObjects.splice(i, 1);
                        }
                    }
                    scene.remove(activeObj);
                });

                var clearScene = document.getElementById("clearBtn");
                clearScene.addEventListener("click", function () {
                    $(activeObjects).each(function () {
                        scene.remove(this); //
                    });
                    activeObjects.length = 0;
                    console.log(activeObjects);
                });

                var scaleUp = document.getElementById("scaleUp");
                scaleUp.addEventListener("click", function () {
                    if (x <= 5) {
                        x += inc;
                        y += inc;
                        z += inc;
                    }
                    activeObj.scale.set(x, y, z);
                }, false);

                var scaleDown = document.getElementById("scaleDown");
                scaleDown.addEventListener("click", function () {
                    if (x > .25) {
                        x -= inc;
                        y -= inc;
                        z -= inc;
                    }
                    activeObj.scale.set(x, y, z);
                }, false);


                var moveForward = document.getElementById("moveForward");
                moveForward.addEventListener("click", function () {
                    activeObj.position.z += zindex;
                }, false);

                var moveBackward = document.getElementById("moveBackward");
                moveBackward.addEventListener("click", function () {
                    activeObj.position.z -= zindex;
                }, false);
            } //end manipulate objects
            manipulateObjs();

            //set original terrarium
            function startScene() {
                createCactus();
                createPyramid();
                createTallFlower();
                createTallFlower();
                createSmallFlower();
                createUfo();
                createpalmTree();
                createAlien();
                createSucculent();
                createTallFlower();
                createSucculent();
                createSmallFlower();
                createSmallFlower();

                activeObjects[0].position.set(.70, -.3, .35);
                activeObjects[0].scale.set(.75, .75, .75);
                activeObjects[1].position.set(0, -.25, 0);
                activeObjects[1].scale.set(1.8, 1.8, 1.8);
                activeObjects[2].position.set(-.55, -.5, 0);
                activeObjects[2].scale.set(.35, .35, .35);
                activeObjects[3].position.set(-.65, -.5, .25);
                activeObjects[3].scale.set(.5, .5, .5);
                activeObjects[4].position.set(-.35, -.5, .45);
                activeObjects[4].scale.set(.5, .5, .5);
                activeObjects[4].rotation.set(0, -.75, 0);
                activeObjects[5].position.set(-.35, .45, .05);
                activeObjects[6].position.set(.55, -.40, -.25);
                activeObjects[6].scale.set(.5, .5, .5);
                activeObjects[7].position.set(.45, -.10, .10);
                activeObjects[7].scale.set(.75, .75, .75);
                activeObjects[8].position.set(-.40, -.5, -.45);
                activeObjects[9].position.set(.15, -.5, -.65);
                activeObjects[9].rotation.set(0, -.85, 0);
                activeObjects[10].position.set(.60, -.5, .25);
                activeObjects[10].scale.set(.5, .5, .5);
                activeObjects[11].position.set(.2, -.5, .65);
                activeObjects[12].position.set(-.10, -.5, .55);
                activeObjects[12].scale.set(.25, .25, .25);
            }
            //Setup Initial Scene
            startScene();
        }


        function renderContainer() {
            var isAnimated = true;

            var addAnimation = document.getElementById("animateBtn");
            addAnimation.addEventListener("click", function () {
                isAnimated = !isAnimated;
                $(this).toggleClass('active');


            }, false);

            function animate() {
                requestAnimationFrame(animate);
                render();
            }

            function render() {
                if (isAnimated) {
                    theta -= 0.5;
                    camera.position.x = 2 * Math.sin(THREE.Math.degToRad(theta));
                    camera.position.y = .25 * Math.sin(THREE.Math.degToRad(theta) + 200);
                    camera.position.z = 2 * Math.cos(THREE.Math.degToRad(theta));

                    // camera.updateMatrixWorld();

                    //
                }
                controls.update();
                renderer.render(scene, camera);
            }
            animate();
        }


        init();
        selectContainer();
        selectObjects();
        renderContainer();



        console.log("done");

        $('.nav-toggle').click(function (e) {
            $(this).toggleClass('open');
            $('.menu-container').toggleClass('nav-open');
        });

        //toggle button styles
        $('.toggle').click(function () {
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
        });
    </script>
</body>

</html>